<template>
  <div v-if="doc?.id" class="whole">
    <h1 style="font-size: 30px;font-weight: bold;display: inline-block">{{ doc.content.title }}</h1>
    【<span class="edit-button" @click="edit">编辑</span>】

    <div style="margin-top: 20px">
      <span class="author" v-for="(author,i) in doc.authors" :key="i">{{ author.lastName + author.firstName }},</span>
    </div>

    <div class="one-item-desc-div">
      <div class="ab-desc-label">摘要:</div>
      <div class="ab-desc">{{ doc.content.ab }}</div>
    </div>

    <div class="one-item-desc-div">
      <div class="keywords-desc-label">关键词:</div>
      <div class="keywords-desc">
        <span class="keywords" v-for="(kw,i) in doc.content.keywords" :key="i">{{ kw.name }},</span>
      </div>
    </div>

    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">文献类别:</div>
      <div class="one-item-desc-div2">{{ doc.category }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">学科分类:</div>
      <div class="one-item-desc-div2">{{ doc.disciplineClassification }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">第一作者:</div>
      <div class="one-item-desc-div2">{{ doc.firstAuthor.lastName + doc.firstAuthor.firstName }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">通讯作者:</div>
      <div class="one-item-desc-div2">{{ doc.correspondingAuthor.lastName + doc.correspondingAuthor.firstName }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">编号:</div>
      <div class="one-item-desc-div2">{{ doc.doi }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">出版日期:</div>
      <div class="one-item-desc-div2">{{ doc.publication.date.toString().substring(0, 10) }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">出版物:</div>
      <div class="one-item-desc-div2">{{ doc.publication.title }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">类型:</div>
      <div class="one-item-desc-div2">{{ doc.publication.category }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">ISBN:</div>
      <div class="one-item-desc-div2">{{ doc.publication.isbn }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">ISSN:</div>
      <div class="one-item-desc-div2">{{ doc.publication.issn }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">卷号:</div>
      <div class="one-item-desc-div2">{{ doc.publication.volume }}</div>
    </div>
    <div class="one-item-desc-div">
      <div class="one-item-desc-div1">期号:</div>
      <div class="one-item-desc-div2">{{ doc.publication.issue }}</div>
    </div>

    <div class="one-item-desc-div">
      <div class="fund-desc-label">基金资助:</div>
      <div class="fund-desc">
        <div class="funds" v-for="(fund,i) in doc.funds" :key="i">
          {{ fund.name }}【编号{{ fund.fundId }}】
        </div>
      </div>
    </div>

    <div class="one-item-desc-div">
      <div class="quotation-desc-label">相关引文:</div>
      <div style="text-align: left;max-width: 900px;min-width: 350px">
        <div class="quotation-author-desc" v-for="(quo,i) in doc.quotations" :key="i">
          <span class="quotation">{{ quo.title }}【编号{{ quo.doi }}】</span>,【作者：
          <span class="author" v-for="(author,j) in quo.authors" :key="j">{{ author.lastName + author.firstName }},</span>】
        </div>
      </div>
    </div>
  </div>
  <div style="margin-top: 100px;text-align: center;">
    GDUFS
  </div>
</template>

<script setup>
import {inject, onMounted, ref} from "vue";
import {getDocById} from "@/apis/document";
import {ElMessage} from "element-plus";

const doc = ref({});
onMounted(() => {
  const id = sessionStorage.getItem('showed_doc_id')
  if (id) {
    getDocById(id).then(resp => {
      if (resp.data.code === 200) {
        doc.value = resp.data.data
        console.log(doc.value);
      } else {
        ElMessage.error(resp.data.msg)
      }
    })
    sessionStorage.removeItem('showed_doc_id')
  } else {
    ElMessage.error('未确定要查看的文档')
  }
})

const linkTo = inject('linkTo')

const edit = () => {
  sessionStorage.setItem('edit_doc_doi', doc.value.doi)
  linkTo(2)
}
</script>

<style scoped>
.whole {
  text-align: center;
  max-width: 1000px;
  min-width: 550px;
  margin: auto;
}

.ab-desc-label {
  font-weight: bold;
  text-align: left;
  margin-right: 10px;
  float: left;
}

.ab-desc {
  text-align: left;
  max-width: 900px;
  min-width: 350px;
}

.keywords-desc-label {
  font-weight: bold;
  text-align: left;
  width: 50px;
  float: left;
}

.keywords-desc {
  text-align: left;
  max-width: 900px;
  min-width: 350px;
}

.fund-desc-label {
  font-weight: bold;
  text-align: left;
  float: left;
}

.fund-desc {
  text-align: left;
  max-width: 900px;
  min-width: 350px;
}

.one-item-desc-div {
  display: flex;
  margin-top: 20px;
}

.one-item-desc-div1 {
  font-weight: bold;
  text-align: left;
  float: left;
  margin-right: 10px;
}

.one-item-desc-div2 {
  text-align: left;
  max-width: 900px;
  min-width: 350px;
}

.quotation-desc-label {
  font-weight: bold;
  text-align: left;
  float: left;
  margin-right: 10px;
}

.quotation-author-desc {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-button {
  font-size: 12px;
  font-style: italic;
}

.edit-button:hover {
  color: blue;
  cursor: pointer;
  text-decoration-line: underline;
}

.author {
  margin-right: 10px;
  color: darkolivegreen;
}

.author:hover {
  color: blue;
  cursor: pointer;
}

.keywords {
  margin-left: 10px;
  color: green;
}

.keywords:hover {
  color: blue;
  cursor: pointer;
}

.funds {
  margin-left: 10px;
  color: #2c3e50;
}

.funds:hover {

}

.quotation {

}

.quotation:hover {
  color: blue;
  cursor: pointer;
}
</style>